<template>
  <div class="index">
       <div class="header">
           <div class="header_top">
            <div @click="toLogin()" v-if="!store.state.isLogin">免费注册</div>|
            <div @click="toLogin()" v-if="!store.state.isLogin">用户登录</div>
            <div @click="toUserCenter()" v-if="store.state.isLogin" class="username">用户：{{ store.state.userInfo.username }}</div>|
            <div v-if="store.state.isLogin" @click="loginOut()" class="loginOut"> 退出登录</div>
           </div>
           <div class="header_center">
               <div>汽车租聘市场</div>
               <div style="color: #ccc;">网站首页</div>
               <div @click="toOptions()">我要租车</div>
               <div @click="toUserCenter()">我要还车</div>
           </div>
       </div>
       <div class="banners">
           <el-carousel indicator-position="outside" height="450px" style="overflow: hidden;">
               <el-carousel-item v-for="item in 4" :key="item">
                   <img src="https://esc.simcms.net/upload/image/20220420/20220420164602_47306.jpg" style="width: 120%;height: 100%; margin-left: -20%;" alt="">
               </el-carousel-item>
           </el-carousel>

           <div class="box">
               <div class="search">
                   <el-input v-model="searchValue" placeholder="请输入型号或者车名" class="input-with-select">
                       <template #append>
                           <el-button icon="Search" style="width: 60px !important;"/>
                       </template>
                   </el-input>
               </div>
               <div class="showBox">
                   <div>我要租车</div>
                   <div style="cursor: pointer;">
                       <img :src="item.img" v-for="(item,index) in logoList" :key="index" @click="toOptions()">
                   </div>
                   <div>
                       <div v-for="(item,index) in logoList" :key="index">{{ item.name }}</div>
                   </div>
               </div>
            </div>

       </div>
       <div class="main">
            <div class="main_center">
               <div class="title" style="margin-top: 50px;">新闻资讯</div>
               <!-- 公告 -->
                <div class="news">
                    <div @click="toLink('https://news.zuche.com/news/info.do?modular=mediacoverage&key=1406')">
                        <span class="text">神州租车获北京市工商联“2023民企社会责任百强”认证</span> <span class="time">2023年11月15日</span>
                    </div>
                    <div @click="toLink('https://news.zuche.com/news/info.do?modular=companydynamics&key=1414')">
                        <span class="text">神州租车凭借诚信经营的服务理念荣获2023中国汽车流通行业优秀会员</span> <span class="time">2023年11月15日</span> 
                    </div>
                    <div @click="toLink('https://news.zuche.com/news/info.do?modular=companydynamics&key=1414')">
                        <span class="text">以“新”赋能行业发展，神州二手车亮相2023中国汽车流通行业年会</span> <span class="time">2023年11月15日</span>
                     </div>
                    <div @click="toLink('https://news.zuche.com/news/info.do?modular=companydynamics&key=1412')">
                        <span class="text">神州租车与北京汽车签署战略合作 向上融合共建未来自驾出行新生态</span> <span class="time">2023年11月15日</span> 
                    </div>
                    <div @click="toLink('https://news.zuche.com/news/info.do?modular=companydynamics&key=1411')">
                        <span class="text">神州租车与航旅纵横携手 开启出行市场跨业态融合新篇章</span> <span class="time">2023年11月15日</span> 
                    </div>
                    <div @click="toLink('https://news.zuche.com/news/info.do?modular=companydynamics&key=1410')">
                        <span class="text">9块9自驾去云南/海南！神州租车上线超值套餐回馈广大用户</span> <span class="time">2023年11月15日</span> 
                    </div>
                    <div @click="toLink('https://news.zuche.com/news/info.do?modular=mediacoverage&key=1367')">
                        <span class="text">2023元旦进入倒计时，用神州租车去跨年</span> <span class="time">2023年11月15日</span>
                     </div>
                    <div @click="toLink('https://news.zuche.com/news/info.do?modular=mediacoverage&key=1409')"><span class="text">牵手张颂文，神州租车诠释“实力派”</span> <span class="time">2023年11月15日</span> </div>
                
                </div>               
                
           </div>
        <div class="main_center">
            <div class="title" style="color: dodgerblue;margin-top: 50px;">最新上架</div>
                <div class="newCarBox" >
                    <div v-for="(item,index) in tableData" :key="index" class="newCar" >
                        <div>
                            <img :src="item.startImage" class="carImage">
                        </div>

                        <div class="newCarMess">
                            <div style="width: 100%;height: 40%;display: flex;flex-wrap: wrap;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                <div style="width: 100%;height: 50%;">{{ item.name }}</div>
                                <div style="width: 100%;height: 50%;font-size: 12px;color: gray;line-height: 35px;">2021-08 上牌 / 1.43万公里</div>
                            </div>
                            <div style="width: 100%;height: 60%;display: flex;">
                                <div style="width: 50%;height: 50%;display: flex;flex-wrap: wrap;">
                                    <div style="width: 100%;height: 50%;color: crimson;">价格：{{ item.price }}万</div>
                                    <div style="width: 100%;height: 50%;font-size: 10px;color: gray;line-height: 50px;">新车指导价：{{ item.fake_price }}万</div>
                                </div>
                                <div  @click="toDetailMess(index)" style="margin-top: 20px;margin-right: 20px;width: 30%;height: 50%;line-height:30px;text-align: center;border: 1px solid gray;">
                                    查看详情
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

       <div class="footer">
           <div class="footer_left">
              
           </div>
           <div class="footer_center">
               <div>租车宝典</div>
               <div>客服中心</div>
               <div>意见反馈</div>
               <div>联系我们</div>
               <div>其它</div>
               <div style="color: #ccc;">车辆鉴别</div>
               <div style="color: #ccc;">人才招聘</div>
               <div style="color: #ccc;">合作加盟</div>
               
           </div>
       </div>
       <messageComp ref="ref_messageComp"></messageComp>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { useStore } from 'vuex'
const store = useStore()
import messageComp from "../components/messageComp.vue";
const ref_messageComp = ref(null) //弹窗message组件refs
import { useRoute, useRouter } from "vue-router";
const router = useRouter()

   let searchValue = ref('')
   const tableData = ref([])
   const logoList = ref([])
   const toDetailMess = (index)=>{
        ref_messageComp.value.loading({dom:'body',text:'数据载入中..',color:'rgba(0, 0, 0, 0.1)'},500,()=>{
            router.push({
            path:'/detailMess',
            query:tableData.value[index],
        })
        })
   }
   const toUserCenter = ()=>{
        router.push({
            path:'/userCenter',
        })
   }

   const loginOut = ()=>{
        ref_messageComp.value.loading({dom:'body',text:'正在为您退出登录..',color:'rgba(0, 0, 0, .4)'},1000,()=>{
            store.commit('userInfo',{})
            ref_messageComp.value.messageInfo('已为您安全退出登录，欢迎您下次回来！')
        })
   }
   // 获取产品列表
   const getData = ()=>{
       axios({
           url:store.state.url + '/cars'
       }).then(res=>{
           if (res.data.code == 200) {
               let arr = res.data.data
                tableData.value = [] //清空数组内容
                ref_messageComp.value.loading({dom:'.newCarBox',text:'数据拉取中..'},200,()=>{
                    // tableData.value = arr
                    tableData.value = arr
                })
               
           }
       }).catch(err=>{
           ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
       })
   }
   const toLink = (url)=>{
    ref_messageComp.value.loading({dom:'.index',text:'数据载入中..',color:'rgba(0, 0, 0, 0.1)'},500,()=>{
        window.open(url)
    })
   }
   const toOptions = ()=>{
    ref_messageComp.value.loading({dom:'.index',text:'数据载入中..',color:'rgba(0, 0, 0, 0.1)'},500,()=>{
        router.push({
            path:'/options',
        })
    })
   }
   const getLogoData = ()=>{
       axios({
           url:store.state.url + '/brands'
       }).then(res=>{
           if (res.data.code == 200) {
               let arr = res.data.data
                ref_messageComp.value.loading({dom:'.index',text:'数据拉取中..',color:'rgba(0, 0, 0, 0)'},300,()=>{
                    logoList.value = arr
                })
           }
       }).catch(err=>{
           ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
       })
   }
   const toLogin = ()=>{
       router.push({
           path:'/login',
       })
   }
   // 执行区
   getData()
   getLogoData()
   store.commit('userInfo') //检查一下是否登录了
</script>

<style scoped src="../css/index.css">

</style>